<template>
	<!-- 页面加载中 -->
	<view class="apploading">

		<view v-if="loading" class="main">
			<view class="container">
				<view class="loader">
					<span></span>
					<span></span>
					<span></span>
					<span></span>
					<span></span>
				</view>

			</view>
		</view>
		<view v-show="!loading">
			<!-- 	<view v-else> -->
			<slot></slot>
		</view>
	</view>

</template>
<script>
	export default {

		data() {
			return {
				loading: false,
				init: false, //首次加载标识
			}
		},


		methods: {
			//页面获取数据
			show(init) {
				if (init && !this.init) {
					this.init = true;
					this.loading = true;
				} else {
					uni.showLoading({
						title: '加载中',
						mask: true,
						duration: 5000

					});
				}


			},
			hide(msg) {
				let that = this;
				if (this.loading) {
					setTimeout(function() {
						that.loading = false;
						if (msg) {
							that.toast(msg)
						}
					}, 200);
				} else {
					uni.hideLoading();
					if (msg) {
						this.toast(msg)
					}
				}




			},
			error(e) {

				if (this.loading) {
					this.loading = false;
				} else {
					uni.hideLoading()

				}
				this.toast(e)




			},

	
			showLoading(msg = "加载中") {
				uni.showLoading({
					title: msg,
					mask: true,
					duration: 5000

				});
			},

			hideLoading(msg) {
				uni.hideLoading();
				if (msg) {
					this.toast(msg)
				}
			},
			//以后扩展用
			errorLoading(e) {
				this.hideLoading();

				this.toast(e)
			},

		}
	}
</script>

<style lang="scss" scoped>
	.apploading {
		position: relative;
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;
		align-items: center;


		.main {

			position: relative;
			//top: 0;
			text-align: center;
			z-index: 999999;
			width: 100vw;
			height: 100%;
			 background-color: #f8f8f8;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.container {
			width: 200rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			color: #666;
			font-size: 18rpx;
		}

		.loader {
			position: relative;
			width: 60rpx;
			height: 60rpx;
			margin: 10rpx;
			/* background-color: violet; */
		}

		.loader span {
			position: absolute;
			height: 60rpx;
			animation: animate 2s linear infinite;
		}

		.loader span::before {
			position: absolute;
			content: "";
			background-color: #666;
			width: 6rpx;
			height: 6rpx;
			bottom: 0;
			left: calc(50% - 6rpx);
			border-radius: 50%;
		}

		.loader span:nth-child(1) {
			animation-delay: 0.1s;
		}

		.loader span:nth-child(2) {
			animation-delay: 0.2s;
		}

		.loader span:nth-child(3) {
			animation-delay: 0.3s;
		}

		.loader span:nth-child(4) {
			animation-delay: 0.4s;
		}

		.loader span:nth-child(5) {
			animation-delay: 0.5s;
		}

		@keyframes animate {

			74% {
				transform: rotate(600deg);
			}

			79% {
				transform: rotate(720deg);
				opacity: 1;
			}

			80% {
				transform: rotate(720deg);
				opacity: 0;
			}

			100% {
				transform: rotate(810deg);
				opacity: 0;
			}
		}


		&-hide {
			display: none;
		}

		&-show {

			display: block;
		}
	}
</style>